<template>
	<view class="container-page">
		<view class="main">
			<view class="box-container">
				<u-form ref="uForm" label-width="300rpx" :model="form">
				<view class="title">物品规格</view>
				<u-form-item label="体积(m³)" prop="volume">
					<view class="flex-right">
						<u-number-box v-model="form.volume" @change="onChange"></u-number-box>
					</view>
				</u-form-item>
				<u-form-item label="重量(kg)" prop="weight">
					<view class="flex-right">
						<u-number-box v-model="form.weight" @change="onChange"></u-number-box>
					</view>
				</u-form-item>
				</u-form>
			</view>
			<view class="p32 t28" style="display: flex;justify-content: space-between;">
				<view class="ml24">木质包装费用</view>
				<view class="mr48 c-error">￥ {{form.price}}</view>
			</view>
		</view>
		<u-line></u-line>
		<view class="bottom p64"  style="display: flex;">
			<view class="t32 c-content" style="flex: 1;text-align: center;align-self: center;">
				<u-button type="info" shape="circle" @click="cancel">取消服务</u-button>
			</view>
			<view class="ml48" style="flex: 2;">
				<u-button type="success" shape="circle" @click="submit">确定</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rules: {
					name: [{
						required: true,
						message: '请输入物品名称',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
				},
				form: {
					volume: 10,
					weight: 100,
					price: 10*0.5+100*0.95,
				},
			}
		},
		created() {

		},
		mounted() {

		},
		onReady() {

		},
		onLoad(e) {
			var bean=uni.getStorageSync('carry_valueadd_wooden')
			if(bean)this.form=bean;
		},
		onShow() {

		},
		methods: {
			// async _shippingCarInfo() {
			// 	const res = await this.$wxapi.shippingCarInfo(this.token)
			// 	if (res.code == 0) {
			// 		res.data.items.forEach(ele => {
			// 			ele.show = false
			// 		})
			// 		this.shippingCarInfo = res.data
			// 	} else {
			// 		this.shippingCarInfo = null
			// 	}
			// },
			submit() {
				// this.$refs.uForm.validate().then(res => {
					this.form.price = this.form.volume*1 + this.form.weight*1;
					uni.$emit('carry_valueadd_wooden', this.form)
					uni.setStorageSync('carry_valueadd_wooden', this.form);
					uni.navigateBack();
				// }).catch(errors => {
				// 	uni.$u.toast('信息未填写完整')
				// })
			},
			cancel() {
				uni.$emit('carry_valueadd_wooden', null)
				uni.setStorageSync('carry_valueadd_wooden', null);
				uni.navigateBack();
			},
			onChange(e){
				this.form.price = this.form.volume*1 + this.form.weight*1;
			},
		}
	}
</script>
<style scoped lang="scss">
.container-page {
	width: 100vw;
	height: calc(100vh - var(--window-bottom) - var(--status-bar-height) - var(--window-top));
	overflow: hidden;
	display: flex;
	flex-direction: column;

	.main {
		flex: 1;
		overflow: hidden;

	}

	.bottom {
		padding: 32rpx 32rpx;

	}
	
	.box-container {
		width: 686rpx;
		margin-left: 32rpx;
		margin-top: 32rpx;
		border-radius: 16rpx;
		box-shadow: 2rpx 2rpx 8px #ddd;
		background-color: #fff;
		padding: 64rpx 32rpx;
		box-sizing: border-box;
		.title {
			color: #333;
			font-size: 38rpx;
			font-weight: bold;
			
		}
	}

	
}

</style>